<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>C.4 效果方法 - jQuery快速参考</title>
<style type="text/css">
body { font-size:0.75em; }
table { width:99%; margin:0 auto; border-top:2px solid #000; border-bottom:2px solid #000; border-collapse:collapse; border-spacing:0; }
table th, table td { padding:0.4em 2em; }
table th { border-bottom:1px solid #000; }
</style>
</head>

<body>
<h3>jQuery快速参考（索引）</h3>
<ul>
  <li><a href="./jq_n1.html">C.1 选择符表达式</a></li>
  <li><a href="./jq_n2.html">C.2 DOM遍历方法</a></li>
  <li><a href="./jq_n3.html">C.3 事件方法</a></li>
  <li><a href="./jq_n4.html">C.4 效果方法</a></li>
  <li><a href="./jq_n5.html">C.5 DOM操作方法</a></li>
  <li><a href="./jq_n6.html">C.6 AJAX方法</a></li>
  <li><a href="./jq_n7.html">C.7 延迟方法</a></li>
  <li><a href="./jq_n8.html">C.8 其他方法</a></li>
</ul>
<hr />
<h1>jQuery快速参考</h1>
<h2>C.4 效果方法</h2>
<p>可以使用效果方法为DOM元素应用动画。第四章详细讨论了效果方法。</p>
<h3>C.4.1 预定义效果</h3>
<table>
  <caption>
  表 C-19
  </caption>
  <tr>
    <th scope="col">效果方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.show()</td>
    <td>显示匹配的元素</td>
  </tr>
  <tr>
    <td>.hide()</td>
    <td>隐藏匹配的元素</td>
  </tr>
  <tr>
    <td>.show(speed, [callback])</td>
    <td>通过高度、宽度及透明度动画显示匹配的元素</td>
  </tr>
  <tr>
    <td>.hide(speed, [callback])</td>
    <td>通过高度、宽度及透明度动画隐藏匹配的元素</td>
  </tr>
  <tr>
    <td>.toggle([speed], [callback])</td>
    <td>显示或隐藏匹配的元素</td>
  </tr>
  <tr>
    <td>.slideDown([speed], [callback])</td>
    <td>以滑入方式显示匹配的元素</td>
  </tr>
  <tr>
    <td>.slideUp([speed], [callback])</td>
    <td>以滑出方式隐藏匹配的元素</td>
  </tr>
  <tr>
    <td>.slideToggle([speed], [callback])</td>
    <td>以滑动方式显示或隐藏匹配的元素</td>
  </tr>
  <tr>
    <td>.fadeIn([speed], [callback])</td>
    <td>以淡入方式显示匹配的元素</td>
  </tr>
  <tr>
    <td>.fadeOut([speed], [callback])</td>
    <td>以淡出方式隐藏匹配的元素</td>
  </tr>
  <tr>
    <td>.fadeToggle([speed], [callback])</td>
    <td>以淡入淡出方式显示或隐藏匹配的元素</td>
  </tr>
  <tr>
    <td>.fadeTo(speed, opacity, [callback])</td>
    <td>调整匹配元素的不透明度</td>
  </tr>
</table>
<h3>C.4.2 自定义动画</h3>
<table>
  <caption>
  表 C-20
  </caption>
  <tr>
    <th scope="col">效果方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.animate(attributes, [speed], [easing], [callback])</td>
    <td>针对指定的CSS属性执行自定义动画</td>
  </tr>
  <tr>
    <td>.animate(attributes, options)</td>
    <td>.animate()的底层接口，支持对动画队列的控制</td>
  </tr>
</table>
<h3>C.4.3 队列操作</h3>
<table>
  <caption>
  表 C-21
  </caption>
  <tr>
    <th scope="col">效果方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.queue([queueName])</td>
    <td>取得第一个匹配元素上的动画队列</td>
  </tr>
  <tr>
    <td>.queru([queueName], callback)</td>
    <td>在动画队列的最后添加回调函数</td>
  </tr>
  <tr>
    <td>.queue([queueName], newQueue)</td>
    <td>以新队列替换原队列</td>
  </tr>
  <tr>
    <td>.dequeue([queueName])</td>
    <td>执行队列中的下一个动画</td>
  </tr>
  <tr>
    <td>.clearQueue([queueName])</td>
    <td>清除所有未执行的函数</td>
  </tr>
  <tr>
    <td>.stop([clearQueue, [jumpToEnd])</td>
    <td>停止当前播放的动画，然后启动排列的动画（如果有）</td>
  </tr>
  <tr>
    <td>.delay(duration, [queueName])</td>
    <td>在执行队列中的下一项前等待duration毫秒</td>
  </tr>
  <tr>
    <td>.promise([queueName], [target])</td>
    <td>在集合中所有排队的操作完成后返回一个待解决的承诺对象</td>
  </tr>
</table>
<hr />
<h3>jQuery快速参考（索引）</h3>
<ul>
  <li><a href="./jq_n1.html">C.1 选择符表达式</a></li>
  <li><a href="./jq_n2.html">C.2 DOM遍历方法</a></li>
  <li><a href="./jq_n3.html">C.3 事件方法</a></li>
  <li><a href="./jq_n4.html">C.4 效果方法</a></li>
  <li><a href="./jq_n5.html">C.5 DOM操作方法</a></li>
  <li><a href="./jq_n6.html">C.6 AJAX方法</a></li>
  <li><a href="./jq_n7.html">C.7 延迟方法</a></li>
  <li><a href="./jq_n8.html">C.8 其他方法</a></li>
</ul>
<p>本内容收集自《jQuery基础教程<sup style="font-size:0.5em;">（第三版）</sup>》，仅自用，禁止发布与公开！</p>
</body>
</html>
